<template>
    <div class="custom-scrollbar min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 overflow-y-auto">
        <!-- Hero Section -->
        <section class="relative h-[70vh] flex items-center overflow-hidden">
            <video class="absolute inset-0 w-full h-full object-cover" autoplay loop muted playsinline>
                <source src="/assets/video/cs2.mp4" type="video/mp4">
            </video>
            <div class="absolute inset-0 bg-black/30"></div>
            <div class="container mx-auto px-4 z-10">
                <div class="max-w-4xl mx-auto text-center">
                    <h1
                        class="text-4xl md:text-5xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">
                        CSGO饰品抵押交易
                    </h1>
                    <p class="text-lg md:text-xl text-white mb-8">
                        专业的CSGO饰品抵押平台，快速放款，利率低至0.05%
                    </p>
                    <div class="flex gap-4 justify-center">
                        <button @click="$router.push('/User')"
                            class="px-6 py-3 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-lg font-semibold hover:shadow-lg hover:shadow-blue-500/30 transition duration-300">
                            立即抵押
                        </button>
                        <button
                            class="px-6 py-3 border-2 border-blue-500 text-blue-600 rounded-lg font-semibold hover:bg-blue-50 transition duration-300">
                            了解更多
                        </button>
                    </div>
                </div>
            </div>
        </section>

        <!-- 优惠广告区 -->
        <section class="py-12 bg-white">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <!-- 利率优惠 -->
                    <div
                        class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition duration-300 border border-gray-100">
                        <div class="text-blue-600 text-4xl font-bold mb-2">0.05%</div>
                        <div class="text-xl text-gray-800 mb-2">超低日利率</div>
                        <p class="text-gray-600">限时优惠，最低利率创新低</p>
                    </div>
                    <!-- 秒放款 -->
                    <div
                        class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition duration-300 border border-gray-100">
                        <div class="text-indigo-600 text-4xl font-bold mb-2">30s</div>
                        <div class="text-xl text-gray-800 mb-2">极速放款</div>
                        <p class="text-gray-600">审核快速，即刻到账</p>
                    </div>
                    <!-- 高估价 -->
                    <div
                        class="bg-white rounded-xl p-6 shadow-lg hover:shadow-xl transition duration-300 border border-gray-100">
                        <div class="text-blue-600 text-4xl font-bold mb-2">95%</div>
                        <div class="text-xl text-gray-800 mb-2">超高估价</div>
                        <p class="text-gray-600">市场最高估价比例</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- 热门饰品展示 -->
        <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">
                    热门抵押饰品
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
                    <div v-for="i in 4" :key="i"
                        class="bg-white rounded-xl p-4 shadow-md hover:shadow-lg transition duration-300">
                        <div class="aspect-square rounded-lg bg-gray-100 mb-4"></div>
                        <div class="text-gray-800 font-semibold mb-2">龙王 (崭新出厂)</div>
                        <div class="flex justify-between items-center">
                            <span class="text-blue-600">抵押率: 95%</span>
                            <span class="text-green-600">￥1,999</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 在热门饰品展示部分后添加 -->
        <section class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">
                    为什么选择我们
                </h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <!-- 安全可靠 -->
                    <div class="text-center group">
                        <div
                            class="w-20 h-20 mx-auto mb-6 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-2xl flex items-center justify-center transform group-hover:rotate-6 transition-transform duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-3">安全可靠</h3>
                        <p class="text-gray-600 leading-relaxed">
                            专业安全团队24小时监控<br>
                            交易全程担保无忧
                        </p>
                    </div>

                    <!-- 极速放款 -->
                    <div class="text-center group">
                        <div
                            class="w-20 h-20 mx-auto mb-6 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-2xl flex items-center justify-center transform group-hover:rotate-6 transition-transform duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-3">极速放款</h3>
                        <p class="text-gray-600 leading-relaxed">
                            智能审核系统秒级处理<br>
                            最快30秒完成放款
                        </p>
                    </div>

                    <!-- 优质服务 -->
                    <div class="text-center group">
                        <div
                            class="w-20 h-20 mx-auto mb-6 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-2xl flex items-center justify-center transform group-hover:rotate-6 transition-transform duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
                            </svg>
                        </div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-3">优质服务</h3>
                        <p class="text-gray-600 leading-relaxed">
                            专业客服团队在线解答<br>
                            贴心服务保障权益
                        </p>
                    </div>
                </div>

                <!-- 服务特点 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mt-16">
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-800">7×24小时服务</h4>
                                <p class="text-sm text-gray-600">随时待命解决问题</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gray-50 p-6 rounded-xl">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                                </svg>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-800">资金安全</h4>
                                <p class="text-sm text-gray-600">专业资金托管</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gray-50 p-6 rounded-xl">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h10a2 2 0 002-2v-6a2 2 0 00-2-2H9a2 2 0 00-2 2v6a2 2 0 002 2zm7-5a2 2 0 11-4 0 2 2 0 014 0z" />
                                </svg>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-800">灵活还款</h4>
                                <p class="text-sm text-gray-600">多种还款方式</p>
                            </div>
                        </div>
                    </div>

                    <div class="bg-gray-50 p-6 rounded-xl">
                        <div class="flex items-center gap-4">
                            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </div>
                            <div>
                                <h4 class="font-semibold text-gray-800">费率透明</h4>
                                <p class="text-sm text-gray-600">无隐藏收费</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script lang="ts" setup>
definePageMeta({
    layout: 'jieshao',
    howInMenu: false, // 控制该页面是否在菜单中显示
    requiresAuth: false, // 控制该页面是否需要登录
})  
</script>

<style lang="scss" scoped>
.custom-scrollbar {
    &::-webkit-scrollbar {
        width: 8px;
    }

    &::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    &::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
        background: #555;
    }
}
</style>